<template>
  <div class="weekly-reward">
    <c-title :text="plugin_name"></c-title>
    <div class="header">
      <div class="img">
        <img :src="avatar" alt="">
      </div>
      <div class="c-fff" style="display: flex; flex-direction: column;">
        <span style="text-align: left; padding-left: 0.5rem;">{{ nickname }}</span>
        <span v-if="active == 'index'" style="font-size: 0.9375rem;">{{ level_name }}</span>
        <span v-if="active == 'area'" style="font-size: 0.9375rem;">{{ area_level_name }}</span>
      </div>
    </div>

    <div class="flex-wrap">
      <div class="w50">
        <p>本周直推支付订单金额</p>
        <p class="mt6 main-color">{{ info.child_pay }}</p>
      </div>
      <div class="w50">
        <p>本周部门支付订单金额</p>
        <p class="mt6 main-color">{{ info.team_pay }}</p>
      </div>
      <div class="w50">
        <p>本周直推完成订单金额</p>
        <p class="mt6 main-color">{{ info.child_finish }}</p>
      </div>
      <div class="w50">
        <p>本周部门完成订单金额</p>
        <p class="mt6 main-color">{{ info.team_finish }}</p>
      </div>
      <div class="line"></div>
    </div>


    <p class="total-money">{{ active == 'index' ? '经销商'+plugin_name+'总额' : '区域代理'+plugin_name+'总额' }}：<span style="color: #fb6b68;">{{
      $i18n.t('money')
    }}{{ active == 'index' ? sum : area_sum }}</span></p>
<!--    <p class="total-money">{{ active=='index'?'经销商未达标次数':'区域未达标次数' }}：<span style="color:#FB6B68">{{ active=='index'?info.di:info.ar }}</span></p>-->
    
    <p class="total-money" v-if="active == 'area'">{{ '区域未达标次数' }}：<span style="color: #fb6b68;">{{  info.ar }}</span></p>
    <p class="total-money space-between flex" @click="goto">
      <span>{{ active=='index'?'部门订单':'区域订单' }}（订单金额{{$i18n.t('money')}}{{order}}）</span>
      <span><van-icon name="arrow" /></span>
    </p>
    <div style="height: 0.625rem;"></div>

    <van-tabs v-model="active" color="#FB6B68" @click="click_handle">
      <van-tab :title="'经销商'+plugin_name+'记录'" name="index">
        <div style="padding-bottom: 1.5625rem; background: #fff;" v-if="list && list.length !== 0">
          <div v-for="item in list" :key="item.id" class="box">
            <div class="flex space-between " style="font-size: 0.875rem;">
              <span style="font-weight: bold;">奖励ID:{{ item.id }}</span>
              <span style="color: #fb6b68;">{{ $i18n.t('money') }}{{ item.rewards_amounts }}</span>
            </div>
            <div class="content ">
              <div class="flex space-between ">
                <span>奖励档：{{ item.limit_amounts }}元档</span>
                <span>奖励序号：{{ item.nums }}</span>
              </div>
              <div class="time">{{ item.created_at }}</div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab :title="'区域代理'+plugin_name+'记录'" name="area">
        <div style="padding-bottom: 1.5625rem; background: #fff;" v-if="area_list && area_list.length !== 0">
          <div v-for="item in area_list" :key="item.id" class="box">
            <div class="flex space-between " style="font-size: 0.875rem;">
              <span style="font-weight: bold;">奖励ID:{{ item.id }}</span>
              <span style="color: #fb6b68;">{{ $i18n.t('money') }}{{ item.rewards_amounts }}</span>
            </div>
            <div class="content ">
              <div class="flex space-between ">
                <span>代理级别：{{ item.level_name }}</span>
                <span>奖励序号：{{ item.nums }}</span>
              </div>
              <div class="time">{{ item.created_at }}</div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      order:"",
      info: {},
      level_name: "",
      showTabs: false,
      active: 'index',
      avatar: "",
      nickname: "",
      show_tabs: false,

      area_list: [],
      area_total_page: 1,
      area_page: 1,
      area_sum: "",

      list: [],
      sum: '',
      total_page: 1,
      page: 1,
      isLoadMore: true,

    };
  },
  activated() {
    this.show_tabs = false;
    this.active = 'index';
    this.order = "";
    this.isLoadMore = true;
    this.get_weekly();

  },
  methods: {
    goto(){
      let num = this.active == 'index' ?1 : 2;
      this.$router.push(this.fun.getUrl('weekly_reward_order',{num}));
    },
    click_handle() {
      if (this.active == 'index') {
        this.get_weekly();
      } else {
        this.get_area()
      }
    },
    get_area(page = 1) {
      $http.post("plugin.weekly-rewards.frontend.controllers.center.area", { page }, 'loading').then(res => {
        this.isLoadMore = true;
        if (res.result == 1) {
          let { info, sum, list,order, level_name } = res.data;
          if (list && list.length !== 0) {
            (page == 1) ? (this.area_list = list.data) : (this.area_list = this.area_list.concat(list.data));
            this.info = info;
            this.order = order;
            this.area_level_name = level_name;
            this.avatar = info.avatar;
            this.nickname = info.nickname;
            this.area_sum = sum;
            this.area_total_page = list.last_page;
            this.area_page = list.current_page;
          }
          this.show_tabs = true;
        } else {
          this.show_tabs = false;
          this.isLoadMore = false;
          this.$toast(res.msg)
        }

      })
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.active == 'index') {
        if (this.page >= this.total_page) {
          return false;
        }
        let page = this.page + 1;
        this.get_weekly(page)
      } else {
        if (this.area_page >= this.area_total_page) {
          return false;
        }
        let page = this.area_page + 1;
        this.get_area(page)

      }
    },
    get_weekly(page = 1) {
      $http.post("plugin.weekly-rewards.frontend.controllers.center.index", { page }, 'loading').then(async (res) => {
        this.isLoadMore = true;
        if (res.result == 1) {
          let { info, sum, list, level_name,order ,plugin_name} = res.data;
          this.plugin_name = plugin_name;
          this.fun.setWXTitle(plugin_name)
          if (list && list.length !== 0) {

            (page == 1) ? (this.list = list.data) : (this.list = this.list.concat(list.data));
            this.order = order;
            this.info = info;
            this.level_name = level_name;
            this.avatar = info.avatar;
            this.nickname = info.nickname;
            this.sum = sum;
            this.total_page = list.last_page;
            this.page = list.current_page;
          }
        } else {
          this.isLoadMore = false;
          this.$toast(res.msg)
        }
      })
    },

  }
};
</script>

<style scoped lang="scss">
.weekly-reward {
  .flex-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #fff;
    padding-top: 0.875rem;
  }

  .line {
    position: absolute;
    height: 1px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #ccc;
    width: calc(100% - 5%);
    margin: 0 auto;
    margin-bottom: 0.3125rem;
  }

  .main-color {
    color: #ef5452;
  }

  .mt6 {
    margin-top: 0.375rem;
  }

  .w50 {
    width: 50%;
    padding-bottom: 1.125rem;
  }

  .c-fff {
    color: #fff;
  }

  .total-money {
    background: #fff;
    padding: 0.375rem 0.9375rem;
    text-align: left;
  }

  .header {
    display: flex;
    align-items: center;
    background: #fb6b68;
    padding: 1.5rem 0.9375rem;
  }

  .img {
    width: 3.625rem;
    height: 3.625rem;
    overflow: hidden;
    border-radius: 100px;
    margin-right: 0.3125rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .box {
    padding: 0.9375rem 0.9375rem 0;
  }

  .time {
    text-align: left;
    margin-top: 0.25rem;
  }

  .content {
    color: #6a6a6a;
    font-size: 0.6875rem;
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f2f2f2;
  }

  .flex {
    display: flex;
  }

  .space-between {
    justify-content: space-between;
  }

  .c-fff {
    color: #fff;
  }
}
</style>
